<!-- 学社 -   -->
<template>
  <view>
    <z-navbar title="创建学社" />
    <!-- 审核中 -->
    <view v-if="state.status" class="pt-25">
      <z-empty imgWidth="228" imgHeight="228" descText="您已提交申请，正在审核中~" spaceSize="48" />
    </view>
    <view v-else class="px-4 py-2 pb-10">
      <view class="w-full h-480">
        <z-file-upload ref="coverUpload" :file-list="state.formData.cover" max-count="1" width="686" height="480"
          custom-btn auto-upload>
          <template #addBtn>
            <image :src='societyCover?.length!=0 ? state.formData.cover[0]?.url : "/static/images/home/img_cover.png"'
              style="width: 686rpx; height: 480rpx" mode="aspectFill" />
          </template>
        </z-file-upload>
      </view>
      <!-- <u-image width="100%" height="480" src="/static/images/home/img_cover.png"></u-image> -->
      <view class="text-26 c-#F4AF22 mt-3">学社封面推荐尺寸：620*415</view>
      <view>
        <u-form :model="state.formData" ref="form" label-position="top" :label-style="labelStyle"
          :error-type="state.errorType">
          <u-form-item label="学社名称" prop="name" :border-bottom="false">
            <u-input v-model="state.formData.name" placeholder-style="font-size: 28rpx; color: #999"
              :custom-style="inputStyle" placeholder="请输入学社名称" />
          </u-form-item>
          <u-form-item label="学社介绍" prop="intro" :border-bottom="false">
            <u-input v-model="state.formData.intro" maxlength="100" type="textarea" height="240" :auto-height="true"
              placeholder-style="font-size: 28rpx; color: #999" :custom-style="inputStyle" placeholder="请输入学社介绍" />
          </u-form-item>
          <u-form-item label="客户经理" :border-bottom="false" />
        </u-form>
      </view>
      <!-- 客户经理 -->
      <scroll-view class="whitespace-nowrap w-full" scroll-x :show-scrollbar="false">
        <view class="scroll-view-item" :class="[state.customIndex == index ? 'scroll-view-item-checked' : '']"
          v-for="(item, index) in state.customList" :key="index" @click="onSelect(index)">
          <u-image width="100%" height="120" :src="item.avatar"></u-image>
          <view class="mt-1 pl-1 c-#333 text-28 text-center text-single">{{ item.nickname }}</view>
          <!-- 选择 -->
          <image v-if="state.customIndex == index" class="absolute w-24 h-24 top-12 right-12"
            src="/static/images/home/ic_checked.png"></image>
          <view v-else class="absolute top-12 right-12 w-24 h-24 bg-#E0E0E0 rounded-full"></view>
        </view>
      </scroll-view>
      <!-- 创建按钮 -->
      <view class="bg-#F4AF22 flex justify-center items-center h-68 c-#fff mt-4 mb-3" @click="onSubmit">创建</view>
      <!-- 学社规则 -->
      <view class="flex justify-center items-center h-40">
        <view @click="state.agree = !state.agree">
          <image v-if="state.agree" class="w-24 h-24" src="/static/images/home/ic_checked.png"></image>
          <view v-else class="w-24 h-24 bg-#E0E0E0 rounded-full"></view>
        </view>
        <view class="ml-2 text-24 c-#999">创建后即认可《<text class="c-#F4AF22"
            @click="navigate('/package_user/pages/common/rule?title=学社规则&type=societyRule')">学社规则</text>》</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { showToast, navigate } from '@/common/util/uni'
import { refreshPrePage } from '@/common/util/util'
import { getCustomerManager, postSocietyCreate, postSocietyResubmit, getRejectInfo } from '@/common/http/module/society.js'
import { onLoad } from '@dcloudio/uni-app';


const state = reactive({
  customIndex: 0,
  status: 0, // 是否有在审核中的学社
  customList: [], // 客户经理列表
  errorType: ['toast'],
  formData: {
    name: '',
    intro: '',
    cover: []
  },
  agree: false,
  club_id: ''
})

const coverUpload = ref()
const form = ref()
const formRules = {
  name: [{ required: true, message: '请输入学社名称', trigger: ['blur', 'change'] }],
  // intro: [{ required: true, message: '请输入学社介绍', trigger: ['blur', 'change'] }],
}

// 表单label样式
const labelStyle = {
  fontFamily: 'PingFang SC',
  color: '#333333',
  fontWeight: 'bold',
  fontSize: '40rpx'
}
const inputStyle = {
  paddingLeft: '16rpx',
  borderRadius: '12rpx',
  color: '#333',
  fontSize: '28rpx',
  backgroundColor: '#F6F6F6'
}

const societyCover = computed(() => {
  return coverUpload.value?.getUploadedList()
})

// 客户经理切换选择
function onSelect(index) {
  state.customIndex = index
}

function onSubmit() {
  form.value.validate(valid => {
    if (!valid) return
    if (!state.agree) {
      showToast('请认真阅读《学社规则》并同意')
      return
    }
    const cover_image = coverUpload.value.getUploadedList()
    if (cover_image && cover_image.length == 0) {
      showToast('请上传学社背景图')
      return
    }
    if (state.club_id) {
      postSocietyResubmit({
        club_id: state.club_id,
        cover_image: cover_image.length > 0 ? cover_image[0].url : '',
        club_name: state.formData.name,
        club_introduce: state.formData.intro,
        customer_manager_id: state.customList && state.customList[state.customIndex]?.id
      }).then(() => {
        refreshPrePage('loadMySociety')
        uni.redirectTo({
          url: 'add_success'
        })
      })
    } else {
      postSocietyCreate({
        cover_image: cover_image.length > 0 ? cover_image[0].url : '',
        club_name: state.formData.name,
        club_introduce: state.formData.intro,
        customer_manager_id: state.customList && state.customList[state.customIndex]?.id
      }).then(() => {
        refreshPrePage('loadMySociety')
        uni.redirectTo({
          url: 'add_success'
        })
      })
    }
  })
}

// 获取客户经理列表
async function loadData() {
  const { data } = await getCustomerManager()
  state.customList = data
  if (state.club_id) {
    getRejectInfo({ club_id: state.club_id }).then((res) => {
      state.formData.name = res.data.club_name
      state.formData.intro = res.data.club_introduce
      state.formData.cover = [{ url: res.data.cover_image }]

    })
  }
}

onLoad((options) => {
  state.club_id = options.club_id
  loadData()
})

onReady(() => {
  nextTick(() => form.value.setRules(formRules))
})
</script>

<style lang="scss" scoped>
.scroll-view-item {
  display: inline-block;
  position: relative;
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  margin-right: 16rpx;
  overflow: hidden;
  border: 2rpx solid transparent;
}

.scroll-view-item:last-child {
  margin-right: 0;
}

.scroll-view-item-checked {
  border: 2rpx solid #F4AF22;
}
</style>
